<template>
  <div class="grimm-tag" :style="{...defaultStyle, ...tagStyle}">
    <div class="grimm-tag-content">{{content}}</div>
  </div>
</template>

<script>
const COMPONENT_NAME = 'grimm-tag';

export default {
  name: COMPONENT_NAME,
  props: {
    content: {
      type: String,
      default: '',
    },

    // Avaliable: fail | success | remind | unStart
    status: {
      type: String,
      default: 'success',
    },

    // Customer style
    tagStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    defaultStyle() {
      const map = this.statusMap;
      if (map[this.status]) {
        return {
          color: map[this.status].color,
          background: map[this.status].bg,
        };
      } else {
        return {
          color: '#56B35C',
          background: 'rgba(86, 179, 92, .12)',
        };
      }
    },
  },
  data() {
    return {
      statusMap: {
        fail: {
          color: '#FF4545',
          bg: 'rgba(255, 69, 69, .12)',
        },
        success: {
          color: '#56B35C',
          bg: 'rgba(86, 179, 92, .12)',
        },
        remind: {
          color: '#FF9100',
          bg: 'rgba(255, 145, 0, .12)',
        },
        unStart: {
          color: '#8896B3',
          bg: 'rgba(136, 150, 179, .12)',
        },
      },
    };
  },
};
</script>
<style lang="stylus"  scoped>
@import '../../common/stylus/variable.styl';

.grimm-tag {
  padding: 0 4px;
  width: fit-content;
  line-height: 16px;
  font-size: 12px;
  text-align: center;
}
</style>
